<template>
  <div class="member-analysis-container">
    <div style="margin-bottom: 10px" class="card table-box">
      <el-form :inline="true" :model="param" style="padding-top: 20px">
        <el-form-item label="日期：">
          <el-date-picker
            v-model="param.dataTimeRange"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            date-format="YYYY/MM/DD"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
          <el-button :icon="Delete" @click="reset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="display: flex; justify-content: space-between">
      <div
        class="card"
        v-for="(item, index) in [
          {
            text: `新增会员`,
            value: dataReport?.increaseCount
          },
          {
            text: `累计会员`,
            value: dataReport?.count
          },
          {
            text: `到店消费会员`,
            value: dataReport?.consumeMember
          },
          {
            text: `消费订单金额`,
            value: dataReport?.consumeTotal + `  元`
          }
        ]"
        :key="index"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 23%;
          height: 150px;
          border-radius: 4px;
        "
      >
        <div style="margin-bottom: 15px; font-size: 18px; color: '#333'">
          {{ item.text }}
        </div>
        <div style="margin-top: 15px; font-size: 18px; color: #fdc31d">
          {{ item?.value }}
        </div>
      </div>
    </div>
    <el-card style="height: 500px; margin-top: 10px">
      <ECharts :option="option" :height="480" />
    </el-card>
    <el-card style="height: 500px; margin-top: 10px">
      <ECharts :option="option2" :height="480" />
    </el-card>
    <el-card style="height: 500px; margin-top: 10px">
      <ECharts :option="option3" :height="480" />
    </el-card>
    <el-card style="height: 500px; margin-top: 10px">
      <ECharts :option="option4" :height="480" />
    </el-card>
  </div>
</template>

<script setup lang="tsx" name="memberAnalysis">
import { ref, onMounted, reactive } from "vue";
import ECharts from "@/components/ECharts/index.vue";
import { Delete, Search } from "@element-plus/icons-vue";
import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { Reporting } from "@/api/interface";

/* 数据 */
let param = ref<{ dataTimeRange: string[]; reportId: number }>({
  dataTimeRange: [formatDate(-7, "start", "yyyy-MM-dd"), formatDate(-1, "end", "yyyy-MM-dd")],
  reportId: 305
});

let dataReport = ref<Reporting.MemberAnalysis | null>();

let option = reactive<any>({
  title: {
    text: "新增会员",
    left: "center"
  },
  tooltip: {
    trigger: "item"
  },
  xAxis: {
    type: "category",
    data: []
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [],
      type: "line",
      smooth: true
    }
  ]
});

let option2 = reactive<any>({
  title: {
    text: "累计会员",
    left: "center"
  },
  xAxis: {
    type: "category",
    data: []
  },
  yAxis: {
    type: "value"
  },
  tooltip: {
    trigger: "item"
  },
  series: [
    {
      data: [],
      type: "line",
      smooth: true
    }
  ]
});

let option3 = reactive<any>({
  title: {
    text: "到店消费会员",
    left: "center"
  },
  xAxis: {
    type: "category",
    data: []
  },
  yAxis: {
    type: "value"
  },
  tooltip: {
    trigger: "item"
  },
  series: [
    {
      data: [],
      type: "line",
      smooth: true
    }
  ]
});

let option4 = reactive<any>({
  title: {
    text: "会员消费订单金额",
    left: "center"
  },
  tooltip: {
    trigger: "item"
  },
  xAxis: {
    type: "category",
    data: []
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [],
      type: "line",
      smooth: true
    }
  ]
});

/* 生命周期 */
onMounted(async function () {
  await GetPageData();
});

/* 方法 */
const GetPageData: () => void = async function () {
  dataReport.value = (await getPageReport(param.value)).data as Reporting.MemberAnalysis;
  let trend = dataReport.value.trend;
  let xArray = trend?.map(l => l.name);
  option.xAxis.data = xArray;
  option2.xAxis.data = xArray;
  option3.xAxis.data = xArray;
  option4.xAxis.data = xArray;
  option.series[0].data = trend?.map(l => l.value);
  option2.series[0].data = trend?.map(l => l.increaseTotal);
  option3.series[0].data = trend?.map(l => l.increaseConsumeMember);
  option4.series[0].data = trend?.map(l => l.increaseConsumeMoney);
};

const search: () => void = async () => {
  await GetPageData();
};

const reset: () => void = async function () {
  param.value.dataTimeRange = [formatDate(-7, "start", "yyyy-MM-dd"), formatDate(-1, "end", "yyyy-MM-dd")];
  await GetPageData();
};
</script>
